import React from 'react';
import WrapperPage from '@/components/WrapperPage';
import styles from './index.module.scss';
import { Step } from '@alifd/next';

const Home = (props) => {
  console.log('home props', props)
  return (
    <WrapperPage path={props.location.pathname}>
      <h1>Create your network in few simple steps:</h1>
      <h2>On your router device:</h2>
      <Step current={1} direction="ver" animation={false} >
  <Step.Item title="Step 1" content={<><div className={styles['home-manu']}>Install the flexiWAN device software on your Ubuntu 18.04 LTS device.Execute as root:<div className={styles['home-code']}>curl -sL https://deb.flexiwan.com/setup | bash - apt-get install flexiwan-router</div></div></>} />
      </Step>
      <h2>On your management account:</h2>
      <Step current={3} direction="ver" animation={false} >
        <Step.Item title="Step 2" content={<><div className={styles["home-manu"]}>Create your organization token in the Inventory → Tokens menu<br/>Copy your organization token into the device file:<div className={styles["home-code"]}>/etc/flexiwan/agent/token.txt</div></div></>} />
        <Step.Item title="Step 3" content={<><div className={styles["home-manu"]}>You should see your device in the Inventory → Devices menu<br/>Click on the device name, approve it and verify the interface configuration<br/>Click on the "Update Device" button and you're ready to go</div></>} />
        <Step.Item title="Step 4" content={<><div className={styles["home-manu"]}>After your device is approved and connected,<br/>you can start it and create secure tunnels to your other sites</div></>} />
      </Step>
    </WrapperPage>
  );
};

export default Home;
